<!--仪器连接首页-->
<template>
	<view>
		<view class="device-connect">
			<view class="operation-button" @click="slectDevice" >选择设备</view>
			<view class="operation-button" @click="disconnectDevice">断开连接</view>
		</view>
		<view :hidden="selectFlag" class="popup_content">
				<view class="popup_title">蓝牙设备列表</view>
				<view class="popup_textarea_item">
					<view class="bule-item" v-for="(item,i) in  buleInfoList" :key="i"
					@click="selectBuleData(item)"
					>{{item.name}}</view>
					<!-- <view @click="submitSelectedData()" class="buttons">
						<text class="popup_button">确定</text>
					</view> -->
				</view>
			</view>
			<view class="popup_overlay" :hidden="selectFlag" @click="hideDiv()"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const selectFlag = ref(true)
	const selectedData = ref("")
	const buleInfoList = ref([{id:"1",name:"tetdfdv325435"},{id:"2",name:"fsdfsdfsdf2"},{id:"3",name:"56546yfgfv3"}])
	//选择设备
	const slectDevice = () =>{
		setTimeout(function() {
		selectFlag.value = false
		}, 1000)
		//调用蓝牙，显示弹窗
		//openBluetoothAdapter();
		//selectFlag.value = false
// 检查浏览器是否支持蓝牙
//if ('bluetooth' in navigator) {
    //let devices = [];
    
    // 监听蓝牙设备
//     navigator.bluetooth.requestDevice({
//         acceptAllDevices: true
//     })
//     .then(device => {
//         devices.push(device);
//         console.log('已发现蓝牙设备:', device.name);

//         // 显示设备列表
//         devices.forEach(device => {
//             console.log('设备名称:', device.name);
//             console.log('设备ID:', device.id);
//         });

//         // 连接选定的蓝牙设备
//         device.gatt.connect()
//         .then(server => {
//             console.log('已连接到蓝牙设备:', device.name);
//             // 在此处可以进行数据传输等操作
//         })
//         .catch(error => {
//             console.error('连接蓝牙设备时出错:', error);
//         });
//     })
//     .catch(error => {
//         console.error('搜索蓝牙设备时出错:', error);
//     });
// } else {
//     console.error('浏览器不支持蓝牙功能');
// }

	}
	//关闭弹窗
	const hideDiv = () =>{
		selectFlag.value = true
	}
	//断开连接
	const disconnectDevice = () =>{
		//断开蓝牙连接
	}
	
	//选择设备并连接
	const selectBuleData = (value) =>{
		//选中后调用连接蓝牙
		console.log("datadatadata",value);
		selectFlag.value = true;
		uni.showToast({
			icon: 'none',
			title: "连接成功！"
		})
		
	}
	function openBluetoothAdapter(){
	 	plus.bluetooth.openBluetoothAdapter({
	 		success:function(e){
	 			console.log('open success: '+JSON.stringify(e));
	 		},
	 		fail:function(e){
	 			console.log('open failed: '+JSON.stringify(e));
	 		}
	 	});
	 }

</script>

<style scoped lang="scss">
	.device-connect{
		width: 750rpx;
		padding-top:50%;
		padding-left:40%;
		.operation-button{
			width:200rpx;
			height:80rpx;
			background-color: #455bdf;
			text-align: center;
			line-height: 80rpx;
			color:#ffffff;
			margin-bottom: 40rpx;
			border-radius: 10rpx;
		}	
	}
	.bule-item{
		width:440rpx;
		height:60rpx;
		background-color: #455bdf;
		margin-bottom: 20rpx;
		text-align: center;
		line-height:60rpx;
		border-radius: 10rpx;
		color:#ffffff;
	}
	.popup_overlay {
				position: fixed;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=88);
			}
	 
			.popup_content {
				position: fixed;
				top: 50%;
				left: 50%;
				width: 500rpx;
				height: 600rpx;
				margin-left: -270rpx;
				margin-top: -270rpx;
				border: 10px solid white;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
	 
			.popup_title {
				width: 480rpx;
				text-align: center;
				font-size: 32rpx;
			}
	 
			.popup_textarea_item {
				padding-top: 5rpx;
				//height: 50rpx;
				width: 440rpx;
				background-color: #F1F1F1;
				margin-top: 20rpx;
				margin-left: 20rpx;
				padding-top: 25rpx;
			}
	 
			.popup_textarea {
				width: 410rpx;
				font-size: 26rpx;
				margin-left: 20rpx;
			}
	 
			.popup_button {
				color: #ffffff;
			}
			.buttons{
				text-align: center;
				font-size: 50rpx;
				margin-top:350rpx;
				background-color: #455bdf;
				cursor: pointer;
				border-radius: 25px;
			}
			.popup_textarea_item{
				background-color: #ffffff;
			}
</style>